<template>
<div class="main">
  <div class="router-box">
    <el-button @click="changeMap('Map')">平面地图</el-button>
    <el-button @click="changeMap('Map3D')">3D地图</el-button>
    <el-button @click="changeMap('Map3DGradient')">渐变3D地图</el-button>
    <el-button @click="changeMap('BigScreen')">大屏展示</el-button>
    <el-button @click="changeMap('xBar')">横向柱状图</el-button>
    <el-button @click="changeMap('CustomReport')">自定义报表</el-button>
    <el-button @click="changeMap('WarningInfo')">预警信息</el-button>
    <el-button @click="changeMap('Tower')">一事一议</el-button>
    <el-button @click="changeMap('RiskBigScreen')">风险大屏</el-button>
  </div>
  <div id="app">
    <router-view  />
  </div>
</div>
  
</template>

<script>

export default {
  name: "App",
  data() {
    return {
      currentMap: 'map'
    }
  },
  methods: {
    changeMap(map) {
      this.currentMap = map
      this.$router.push({
        name: map
      })
    }
  }
};


</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}
.router-box {
  height: 100%;
  width: 130px;
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;

  .el-button {
    margin: 5px;
  }
}
#app {
  height: 100%;
  width: 90%;
  background-color: #0f1e33;
}
</style>
